<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="6">北辰散乱污企业监测系统</el-col>
      </el-row>
      <el-dialog
        title="信息"
        :visible.sync="centerDialogVisible"
        width="40%"
        center>
        <div class="dialog">企业分类</div>
        <div>
          <el-radio-group v-model="checkedCities" @change="handleCheckedCitiesChange">
            <el-radio v-for="city in cities" :label="city" :key="city.name" value="city.id">{{city.name}}</el-radio>
          </el-radio-group>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="centerDialog">确 定</el-button>
        </span>
      </el-dialog>
    </el-header>
    <el-container class="container">
      <transition enter-active-class="fadeIn">
        <el-aside v-show="aside"
          width="200px">
          <div class="border-style">
            <router-link to="/index">污染企业实时信息</router-link>
          </div>
          <div class="border-style">
            <router-link to="/Detail">企业信息</router-link>
          </div>
        </el-aside>
      </transition>
      <div class="slide"
        @click="slideA">
        <i class="el-icon-d-arrow-left icon"></i>
      </div>
      <el-main>
        <baidu-map class="map"
          :zoom="zoom"
          :center="center"
          :scroll-wheel-zoom="true"
          >
          <template v-for="(item, index) in points">
            <bm-marker :key="index"
              :position="item"
              :dragging="false"
              :icon="mpIcon.icon0"
              @click="infoWindowOpen($event,index)">
              <bm-info-window :show="item.show" @close="infoWindowClose($event,index)">
                  <p>
                      <span>公司名称：{{item.companyname}}</span>
                  </p>
                  <p>
                      <span>地址：{{item.region}}</span>
                  </p>
                  <p>
                      <span>建筑面积：{{item.areacovered}}</span>
                  </p>
                  <p>
                      <span>新企业：{{item.newenterprise}}</span>
                  </p>
                  <p>
                      <span>调解方式：{{item.regulationmode}}</span>
                  </p>
                  <!-- <p>
                      <span>详情：{{item.remarks}}</span>
                  </p> -->
              </bm-info-window>
            </bm-marker>
          </template>
        </baidu-map>
      </el-main>
      <!-- <el-row id="yincang" v-show="yincang">
        <el-col :md="8" :lg="8"><div @click="yincangA">点击隐藏</div></el-col>
      </el-row> -->
    </el-container>
    <el-footer>
      <el-row>
        <el-col :span="24" class="enterFication">
          <el-button type="primary" @click="centerDialogVisible = true" class="button">企业分类</el-button>
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item class="modify1">
              <el-input id="query1" v-model="formInline.type" placeholder="请输入类型名称"  v-on:input ="inputFunc"></el-input>
              <div id="div_items" style="display:none;"> 
                <div v-for="name in names" :key="name.name" data-num="name.id" @click="bainhua($event)">{{name.name}}</div>
							</div>
            </el-form-item>
            <el-form-item class="modify">
              <el-input id="query" v-model="formInline.name" placeholder="请输入公司名称" v-on:input ="inputFunc1"
              :rules="{required: true, message: '请输入公司名称', trigger: 'blur'}"></el-input>
              <div id="div_items1" style="display:none;"> 
                <div v-for="name in modifyNames" :key="name.name" data-num="name.id" @click="bainhua1($event)">{{name.name}}</div>
							</div>
              <div class="renzheng" style="display:none" id="renzheng">请输入公司名称</div>
            </el-form-item>
            <el-form-item class="chaxun">
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
import Alarm from '../assets/home1.png'
import Alarm1 from '../assets/huagong.png'
import Alarm2 from '../assets/qixiu.png'
import Alarm3 from '../assets/jinshu.png'
import Alarm4 from '../assets/pentu.png'
import Alarm5 from '../assets/zhizaoye.png'
import Alarm6 from '../assets/gangcai.png'
import Alarm7 from '../assets/zixingche.png'
import Alarm8 from '../assets/yinran.png'
import Alarm9 from '../assets/jinshujiagong.png'
import {
  BaiduMap,
  BmMarker,
  BmInfoWindow
} from 'vue-baidu-map'
export default {
  name: 'Layout',
  components: {
    BaiduMap,
    BmMarker,
    BmInfoWindow,
  },
  data() {
    return {
      zoom: 13,
      center: { lng: 117.127289, lat: 39.279725 },
      aside: true,
      yincang: true,
      centerDialogVisible: false,
      style: { margin: 0 },
      checkAll: false,
      checkedCities: [],
      cities: '',
      isIndeterminate: true,
      data: '',
      xuanze:'',
      points: [],
      mpIcon: {
        icon0: {
          url: '',
          size: { width: 32, height: 32 }
        }
      },
      dialog1: false,
      formInline: {
        name: '',
        type:'',
      },
      names: '',
      modifyNames: '',
      show: false
    }
  },
  created() {
    this.getEnterInfor()
  },
  methods: {
    bainhua(e,num){
      document.getElementById('query1').value = e.target.innerHTML
      document.getElementById('div_items').style.display = "none"
    },
    bainhua1(e,num){
      document.getElementById('query').value = e.target.innerHTML
      document.getElementById('div_items1').style.display = "none"
    },
    inputFunc(){
      const type = document.getElementById('query1').value
      this.$api.ENTERINFOR_SYSTEM.typeQuery({
        name: type
      }).then(res => {
        // console.log(res)
        document.getElementById('div_items').style.display = "block"
        for(let i=0;i<res.data.length;i++) {
          var cityName = []
        for(let i=0;i<res.data.length;i++) {
          const obj = {
            id: res.data[i].id,
            name: res.data[i].name
          }
          cityName.push(obj)
        }
        this.names = cityName
        }
      })
    },
    inputFunc1(){
      const name = document.getElementById('query').value
      this.$api.ENTERINFOR_SYSTEM.nameQuery({
          companyname: name
        }).then(res => {
          console.log(res.data.content)
          document.getElementById('div_items1').style.display = "block"
            var cityName = []
          for(let i=0;i<res.data.content.length;i++) {
            const obj = {
              id: res.data.content[i].id,
              name: res.data.content[i].companyname
            }
            cityName.push(obj)
          }
          // console.log(cityName)
          this.modifyNames = cityName
        })
    },
    infoWindowOpen(event,index){
      // console.log(index);
      // console.log(this.points)
      let _getPosition = event.target.getPosition()
      // console.log(_getPosition)
      let show = this.points[index].show;
      this.points[index].show = !show;
      this.points[index].textlng = _getPosition.lng;
      this.points[index].textlat = _getPosition.lat;
    },
    infoWindowClose(event,index){
      this.points[index].show = false;
    },
    onSubmit() {
      const points = []
      const name = document.getElementById('query').value
      const type = document.getElementById('query1').value
      if(name !== '' && type === ''){
        this.$api.ENTERINFOR_SYSTEM.nameQuery({
          companyname: name
        }).then(res => {
          console.log(res.data.content)
          for(let i=0;i<res.data.content.length;i++) {
            if(res.data.content[i].industrytype === 80){
              this.mpIcon.icon0.url = Alarm
            }
            if(res.data.content[i].industrytype === 65){
              this.mpIcon.icon0.url = Alarm1
            }
            if(res.data.content[i].industrytype === 133){
              this.mpIcon.icon0.url = Alarm2
            }
            if(res.data.content[i].industrytype === 93){
              this.mpIcon.icon0.url = Alarm3
            }
            if(res.data.content[i].industrytype === 125){
              this.mpIcon.icon0.url = Alarm4
            }
            if(res.data.content[i].industrytype === 219){
              this.mpIcon.icon0.url = Alarm5
            }
            if(res.data.content[i].industrytype === 51){
              this.mpIcon.icon0.url = Alarm6
            }
            if(res.data.content[i].industrytype === 228){
              this.mpIcon.icon0.url = Alarm7
            }
            if(res.data.content[i].industrytype === 197){
              this.mpIcon.icon0.url = Alarm8
            }
            if(res.data.content[i].industrytype === 92){
              this.mpIcon.icon0.url = Alarm9
            }
            const element = res.data.content[i]
            const position = {
              id: element.id,
              lat: element.latitude,
              lng: element.longitude,
              show: false,
              areacovered: element.areacovered,
              companyname: element.companyname,
              newenterprise: element.newenterprise,
              region: element.region,
              regulationmode: element.regulationmode,
              remarks: element.remarks,
              newenterprisename: element.newenterprisename===null ? '': element.newenterprisename
            }
            points.push(position)
          }
          this.points = points
        })
      }
      var dataId = ''
      for(let j=0;j<this.names.length;j++){
        if(type === this.names[j].name){
          dataId = this.names[j].id
        }
      }
      const params = {
        industrytype: dataId,
        companyname: name
      }
      if(type !== '' && name === ''){
        document.getElementById('renzheng').style.display = "block"
      }
      // console.log(params)
      if(type !== '' && name !== ''){
        this.$api.ENTERINFOR_SYSTEM.typeNameQuery(params)
        .then(res => {
          // console.log(res)
          for(let i=0;i<res.data.length;i++) {
            if(res.data[i].industrytype === 80){
              this.mpIcon.icon0.url = Alarm
            }
            if(res.data[i].industrytype === 65){
              this.mpIcon.icon0.url = Alarm1
            }
            if(res.data[i].industrytype === 133){
              this.mpIcon.icon0.url = Alarm2
            }
            if(res.data[i].industrytype === 93){
              this.mpIcon.icon0.url = Alarm3
            }
            if(res.data[i].industrytype === 125){
              this.mpIcon.icon0.url = Alarm4
            }
            if(res.data[i].industrytype === 219){
              this.mpIcon.icon0.url = Alarm5
            }
            if(res.data[i].industrytype === 51){
              this.mpIcon.icon0.url = Alarm6
            }
            if(res.data[i].industrytype === 228){
              this.mpIcon.icon0.url = Alarm7
            }
            if(res.data[i].industrytype === 197){
              this.mpIcon.icon0.url = Alarm8
            }
            if(res.data[i].industrytype === 92){
              this.mpIcon.icon0.url = Alarm9
            }
            const element = res.data[i]
            const position = {
              id: element.id,
              lat: element.latitude,
              lng: element.longitude,
              show: false,
              areacovered: element.areacovered,
              companyname: element.companyname,
              newenterprise: element.newenterprise,
              region: element.region,
              regulationmode: element.regulationmode,
              remarks: element.remarks,
              newenterprisename: element.newenterprisename===null ? '': element.newenterprisename
            }
            points.push(position)
          }
          this.points = points
        })
      }
    },
    // handleCheckAllChange(val) {
    //   const data = []
    //   var b;
    //   for(let i=0;i<this.cities.length;i++){
    //     data.push(this.cities[i].id)
    //   }
    //   b = data.join(",")
    //   this.xuanze = b
    //     this.checkedCities = val;
    //     this.isIndeterminate = false;
    //   },
      handleCheckedCitiesChange(value) {
        // console.log(value.id)
        // const data = []
        // var b;
        // for(let i=0;i<value.length;i++) {
        //   data.push(value[i].id)
        // }
        // b = data.join(",")
        this.xuanze = value.id
        // console.log(this.xuanze)
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      },
      centerDialog() {
        // console.log(this.xuanze)
        this.centerDialogVisible = false
        const params = ({
          integerList: this.xuanze
        })
        const points = []
        this.$api.ENTERINFOR_SYSTEM.coordinates(params).then(res => {
          // console.log(res)
          for(let i=0;i<res.data.length;i++) {
            if(res.data[i].industrytype === 80){
              this.mpIcon.icon0.url = Alarm
            }
            if(res.data[i].industrytype === 65){
              this.mpIcon.icon0.url = Alarm1
            }
            if(res.data[i].industrytype === 133){
              this.mpIcon.icon0.url = Alarm2
            }
            if(res.data[i].industrytype === 93){
              this.mpIcon.icon0.url = Alarm3
            }
            if(res.data[i].industrytype === 125){
              this.mpIcon.icon0.url = Alarm4
            }
            if(res.data[i].industrytype === 219){
              this.mpIcon.icon0.url = Alarm5
            }
            if(res.data[i].industrytype === 51){
              this.mpIcon.icon0.url = Alarm6
            }
            if(res.data[i].industrytype === 228){
              this.mpIcon.icon0.url = Alarm7
            }
            if(res.data[i].industrytype === 197){
              this.mpIcon.icon0.url = Alarm8
            }
            if(res.data[i].industrytype === 92){
              this.mpIcon.icon0.url = Alarm9
            }
            const element = res.data[i]
            const position = {
              id: element.id,
              lat: element.latitude,
              lng: element.longitude,
              show: false,
              areacovered: element.areacovered,
              companyname: element.companyname,
              newenterprise: element.newenterprise,
              region: element.region,
              regulationmode: element.regulationmode,
              remarks: element.remarks,
              newenterprisename: element.newenterprisename===null ? '': element.newenterprisename
            }
            points.push(position)
          }
          this.points = points
        })
      },
    slideA() {
      this.aside = !this.aside
    },
    yincangA() {
      this.yincang = !this.yincang
    },
    getEnterInfor() {
      this.$api.ENTERINFOR_SYSTEM.dataInterList().then(res => {
        console.log(res)
        var cityOpt = []
        for(let i=0;i<res.data.length;i++) {
          const obj = {
            id: res.data[i].id,
            name: res.data[i].name
          }
          cityOpt.push(obj)
        }
        this.cities = cityOpt
      })
    },
    handleOff() {
      // console.log('this.timer :', this.timer)
      clearTimeout(this.timer)
      this.dialog1 = false
    }
  }
}
</script>

<style scoped>
.el-main{
  padding: 0;
}
.map{
  height: 875px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
/* @media screen and (max-width: 1200px) {
  .map{
  height: 875px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
} */
@media screen and (max-width: 1200px) {
  .map{
  height: 520px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
}
.el-container{
  height: 100%;
}
.container{
  position: relative;
}
.el-aside{
  background: #0C0F23;
  z-index: 5;
}
.icon{
  position: absolute;
  color: #fff;
  top: 50%;
}
.slide{
  display: block;
  width: 20px;
  height: 100%;
  background: #181b2e;
  cursor: pointer;
  z-index: 5;
}
.BMap_cpyCtrl {
  display: none;
}
.anchorBL {
  display: none;
}
#yincang{
  margin-top: 12%;
  background: #F2F2F2;
  width: 20%;
}
.el-header{
  background: #23262E;
  color: #009688;
  font-size: 20px;
  line-height: 60px;
}
.el-button--text{
  color: #fff;
  font-size: 20px;
}
.el-button--text:hover{
  color: #fff;
}
.el-dialog__header{
  padding: 0;
  background: #F8F8F8;
  border-bottom: 1px solid #eee;
  line-height: 40px;
  text-align: left;
  padding-left: 10px;
}
.el-dialog__title{
  font-size: 14px;
}
.el-dialog--center .el-dialog__body{
  padding: 0 10px;
}
.dialog{
  font-size: 20px;
  line-height: 40px;
}
.dialog-footer .is-indeterminate,.dialog-footer .el-checkbox__inner{
  display: none;
}
.dialog-footer .el-checkbox,.dialog-footer .el-checkbox__label{
  background: #409EFF;
  color: #fff;
}
.dialog-footer .el-checkbox__input.is-checked+.el-checkbox__label{
  color: #fff;
}
.dialog-footer .el-checkbox{
  width: 80px;
  height: 40px;
  border-radius: 5px;
  line-height: 40px;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
  color: #606266;
}
.button,.demo-form-inline{
  float: left;
  margin-top: 10px;
}
.demo-form-inline{
  margin-left: 100px;
}
.border-style{
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-bottom: 3px solid #196091;
}
a{
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  padding: 18px 5px 18px 5px;
}
#div_items{
  width: 200px;
  position: absolute;
  top: 42px;
  left: 5px;
  z-index: 999;
  background: #fff;
  padding: 0 10px;
  height: 200px;
  overflow-y: scroll;
}
#div_items1{
  width: 290px;
  position: absolute;
  top: 42px;
  left: 5px;
  z-index: 999;
  background: #fff;
  padding: 0 10px;
  height: 200px;
  overflow-y: scroll;
}
.modify .el-form-item__content{
  width: 315px;
}
.modify1 .el-form-item__content{
  width: 225px;
}
.el-radio{
  line-height: 100px;
}
.el-radio__label{
  font-size: 20px;
}
.el-radio:first-child{
  padding-left: 30px;
}
.el-radio__inner{
  border-radius: 0;
  width: 18px;
  height: 18px;
}
.renzheng{
  color: red;
  position: absolute;
  top: 0;
  right: 0px;
  width: 100px;
}
.el-footer{
  width: 100%;
  position: absolute;
  top: 60px;
  left: 0;
  background: #e5e5e5;
}
.enterFication{
  padding-left: 18%;
}
</style>
<style>
.BMap_cpyCtrl {
  display: none;
}
.anchorBL {
  display: none;
}
.el-radio{
  line-height: 100px;
}
.el-radio__label{
  font-size: 20px;
}
.el-radio:first-child{
  padding-left: 30px;
}
.el-radio__inner{
  border-radius: 0;
  width: 18px;
  height: 18px;
}
@media screen and (max-width: 1200px) {
  .map{
  height: 500px;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
}
</style>
